<template>
  <div id="contentRight">
    <section id="sec1">
      <div class="d1">
        <button :class="profitType === 0 ?'active' : ''" @click="profitType = 0">BTC算力</button>
        <button :class="profitType === 1 ?'active' : ''" @click="profitType = 1">IPFS算力</button>
      </div>
<!--      <p class="title">挖矿产出</p>-->
      <div v-if="profitType === 0" class="d2">
        <table>
          <thead>
            <tr>
              <td>产出日期</td>
              <td>总算力</td>
              <td>产出BTC(含冻结)</td>
              <td>合约冻结</td>
<!--              <td>产出BHP</td>-->
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item , index) in list">
              <th>{{item.incomeDate}}</th>
              <th>{{item.incomePower}}T</th>
              <th>{{item.num}} BTC ≈ {{item.total_price}} CNY</th>
              <th>{{item.insuranceFrozenIncomeNum}} BTC ≈ {{item.freeze_rmb}} CNY</th>
<!--              <th>{{item.bhpIncomeNum}} ≈ {{item.bhp_rmb}} CNY</th>-->
            </tr>
          </tbody>
        </table>
      </div>
      <div class="d3 iframeBox" v-if="profitType === 1">
        <iframe :src="iframeUrl" frameborder="0"></iframe>
      </div>
      <div class="pagination" v-if="profitType === 0 && totalNum > 0">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="prev, pager, next, jumper"
          :page-count="totalNum">
        </el-pagination>
      </div>
    </section>
  </div>
</template>
<script>
  import { powerProduct , ipfsProduct} from '../http/api';
  export default {
    name : 'profitList',
    data(){
      return{
        list : [],
        profitType : 0 ,
        listData : [],
        currentPage: 1,
        totalNum : 1,//总页数
        pageSize : 15,
        total_btc : '0.00000000',
        total_bhp : '0.00000000',
        iframeUrl : null,
      }
    },
    components:{
      //DatePicker :  require('element-ui').DatePicker , /*DatePicker*/
      ElPagination : require('element-ui').Pagination , /*ElPagination*/
    },
    mounted() {
      this.loadPage();
    },
    watch:{
      profitType(type){
        if(type === 1 && !this.iframeUrl){
          this.loadIframeUrl();
        }
      },
    },
    methods :{
      loadPage(){
        let thiz = this;
        powerProduct().then(res => {
          if(res.code == 200){
            let list = res.data.lists;
            let data = res.data;
            thiz.total_btc = thiz.numSlice(data.total_btc, 8);
            thiz.total_bhp = thiz.numSlice(data.total_bhp, 8);
            thiz.for(list , (item , index) => {
              item.incomePower = thiz.numSlice(item.incomePower, 2);
              item.insuranceFrozenIncomeNum = thiz.numSlice(item.insuranceFrozenIncomeNum, 8);
              item.num = thiz.numSlice(item.num, 8);
              item.bhpIncomeNum = thiz.numSlice(item.bhpIncomeNum, 8);
            });
            thiz.listData = list;
            thiz.initList();
          }
        });
      },
      initList (){
        let thiz = this;
        let size = this.pageSize;
        let curPage = this.currentPage - 1;
        let data = this.listData;
        let length = data.length;
        let totalPage = Math.ceil( thiz.accDiv(length , size));//总页数
        this.totalNum = totalPage;
        let beginPosition = thiz.accMoreMul( curPage , size);
        let endPosition = beginPosition + ( size - 1 );
        let list = [];
        thiz.for(data , (item , index) => {
          if(index <= endPosition && index >= beginPosition ){
            list.push(item);
          }
        });
        thiz.list = list;
      },
      loadIframeUrl(){
        ipfsProduct().then(res => {
          if(res.code == 200){
            this.iframeUrl = res.data.url;
          }
        });
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initList();
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
   padding: 0;min-height: 725px;
    >.d1{
      padding: 0 25px;padding-top: 25px;
      >button{
        font-size: 18px;color: #262626;background: none;padding-bottom: 11px;
        &:first-child{
          margin-right: 60px;
        }
        &:hover{
          .colorYellow;
        }
        &.active{
          .colorYellow;position: relative;
          &:after{
            content: '';display: block;width: 100%;height: 2px;.bgYellow;position: absolute;bottom: 0;left: 0;
          }
        }
      }
    }
    >.d2{
      padding:0 25px;padding-top: 25px;
      >table{
        width: 100%;text-align: left;
        thead>tr>td:first-child , tbody>tr>th:first-child{
          padding-left: 0px;min-width: 90px;
        }
        thead>tr>td:last-child , tbody>tr>th:last-child{
          padding-right: 0px;
        }
        th{
          font-weight: 500;font-size: 14px;color: #262626;
          >span{
            display: inline-block;height: 100%;
          }
        }
        >thead{
          color: #999999;font-size: 14px;
          tr>td{
            padding: 15px 0;
            &:last-child{
              text-align: right;
            }
          }
        }
        >tbody{
          th{
            border-bottom: 1px solid#eee;padding: 15px 6px;color: #595959;font-size: 14px;vertical-align: text-top;
          }
          tr>th:first-child{
            max-width: 220px;
          }
          >tr>th:last-child{
            text-align: right;
          }
          .pointer{
            .colorYellow;text-decoration: underline;
            &:hover{
              cursor: pointer;
            }
          }
          .setting{
            >span{
              display: inline-block;width: 100%;text-align: right;margin-top: 15px;
              &:first-child{
                margin-top: 0px;
              }
            }
          }
        }
      }
    }
    >.iframeBox{
      padding:25px;
      >iframe{
        width: 100%;height: 700px;
      }
    }
    >.pagination{
      text-align: right;padding: 36px 0;padding-right: 26px;
      /deep/ input{
        width: auto;
        &.el-input__inner{
          width: 100%;
        }
      }
    }
  }
</style>
